<template>
  <div class="loginbox">
    <header>
      <img
        @click="gotowhere('home')"
        src="../../assets/images/logo.png"
        alt=""
      />
    </header>

    <p class="text">登录</p>

    <van-row class="formbox">
      <van-form ref="smsform" @submit="smsLogin">
        <van-cell-group>
          <van-field
            v-model="sms.phone"
            name="phone"
            label="手机号码"
            placeholder="请输入"
            :rules="[
              { required: true, message: '请填写手机号码' },
              {
                pattern: /^1[3|4|5|6|7|8|9][0-9]{9}$/,
                message: '请输入正确的手机号码',
              },
            ]"
          />
          <van-field
            v-model="sms.captcha"
            clearable
            label="短信验证码"
            placeholder="请输入"
            maxlength="4"
            :rules="[
              { required: true, message: '请填写验证码' },
              {
                pattern: /^\d{4}$/,
                message: '请输入正确的验证码',
              },
            ]"
          >
            <template #button>
              <van-button
                v-if="!flag"
                @click="getCaptcha"
                size="small"
                type="primary"
                >获取验证码</van-button
              >
              <van-button
                v-else
                class="timebtn"
                @click="getCaptcha"
                size="small"
                disabled
              >
                {{ count }} S</van-button
              >
            </template>
          </van-field>
        </van-cell-group>

        <div>
          <van-button
            class="log"
            native-type="submit"
            block
            type="primary"
            >登录</van-button
          >
          <van-button
            @click="gotowhere('register')"
            class="reg"
            native-type="submit"
            block
            type="danger"
            >注册</van-button
          >
        </div>
      </van-form>
    </van-row>
  </div>
</template>


<script>
export default {
  data() {
    return {
      active: "pass",
      login: {},
      type1: "password",
      sms: {},
      flag: false,
      count: 60,
      timer: null,
    };
  },
  methods: {
    checkPhoneRules() {},
    smsLogin() {
      this.$ajax.captchatverify(this.sms).then((res) => {
        if (res.data.code == 200) {
          this.$router.push({ name: "mine" });
          localStorage.setItem("phone", this.sms.phone);
        }
      });
    },
    getCaptcha() {
      if (this.sms.phone) {
        if (this.$reg.phone.test(this.sms.phone)) {
          // 防抖
          // 发送请求
          this.count--;
          this.flag = true;
          this.timer = setInterval(() => {
            if (this.count > 0) {
              this.count--;
              this.flag = true;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.flag = false;
              this.count = 60;
            }
          }, 1000);

          this.$ajax
            .checkPhone({
              phone: this.sms.phone,
            })
            .then((res) => {
              if (res.data.length > 0) {
                this.$ajax
                  .captchatsend({
                    phone: this.sms.phone,
                  })
                  .then((res) => {});
              } else {
                this.$notify({
                  type: "danger",
                  message: "手机号码没有注册,暂不能登录,请注册",
                });
              }
            });
        } else {
          this.$notify({ type: "danger", message: "请先输入有效手机号码" });
        }
      } else {
        this.$notify({ type: "danger", message: "请先输入手机号码" });
      }
      // if(this.$refs.smsform.validate('phone')){

      // }else{

      // }
    },
    changeType1() {
      this.type1 = this.type1 == "password" ? "text" : "password";
    },
    loginSubmit(value) {
      console.log(value);
      this.$ajax.checkPhone(value).then((res) => {
        if (res.data.length > 0) {
          // 登录成功
          this.$router.push({ name: "mine" });
          localStorage.setItem("phone", res.data[0].phone);
          this.changeUserinfo(res.data[0]); // 用户信息存储在 vuex
        } else {
          this.$notify({
            message: "登录失败",
            color: "#ad0000",
            background: "#ffe1e1",
          });
        }
      });
    },
  },
  mounted() {
    if (this.$route.query.phone) {
      this.login = {
        ...this.login,
        phone: this.$route.query.phone, // 获取注册成功的手机号
      };
    } else {
      this.login = {
        ...this.login,
        phone: localStorage.phone, // 获取注册成功的手机号
      };
    }
  },
};
</script>



<style lang="scss" scoped>
.loginbox {
  background: #f4f4f4;
  header {
    width: 100%;
    height: 80px;
    background: #fff;
    z-index: 100;
    border-bottom: 0.5px solid #b9b9b9;
    padding: 15px 20px;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .text {
    font-size: 22px;
    font-weight: 700;
    color: #1b1b1b;
    margin-left: 20px;
    margin-top: 15px;
  }
  .formbox {
    width: 100%;
    padding: 16px;
    .log {
      margin-top: 15px;
      margin-bottom: 10px;
    }
    // .reg{
    //   background: #f4f4f4;
    //       color: #1b1b1b;
    // }
  }
}
</style>